<template>
	<view :class="isBottomBorder?'section bottom_border':'section'" @click="toClick" @longtap="toLongTap">
		<view class="left">
			<image :class="size" v-if="leftIcon" :src="leftIcon"></image>
			<view class="info">
				<text class="title">{{title}}</text>
				<text class="desc">{{desc}}</text>
			</view>
		</view>
		<view class="right">
			<slot></slot>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"MessageItem",
		props:{
			title:{
				type:String,
				default:""
			},
			leftIcon:String,
			rightText:String,
			rightIcon:String,
			desc:String,
			size:{
				type:String,
				default:"standard"
			},
			isMore:Boolean,
			isBottomBorder:Boolean
			
		},
		data() {
			
			return {
				
				moreIcon:"/static/icon/more.png"
			};
			
		},
		created() {
		

		},
		methods:{
			toClick(){
				this.$emit("click")
			},
			toLongTap(){
				this.$emit("longtap")
			}
		}
	}
</script>

<style lang="scss"  scoped>
	.section{
		display: flex;
		background-color: white;
		padding: 20rpx;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.info{
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20rpx;
				.title{
					font-weight: bold;
					
					font-size: 30rpx;
				}
				.desc{
					display: -webkit-box;
					font-size: 25rpx;
				}
			}
			
		}
		
		
		.right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: gray;
			
		}
		.right_icon{
			width: 50rpx;
			height: 50rpx;
			
		}
		.bit_big{
			width: 85rpx;
			height: 85rpx;
		}
		.small{
			width: 70rpx;
			height: 70rpx;
		}
		.mini{
			width: 30rpx;
			height: 30rpx;
		}
		.standard{
			width: 50rpx;
			height: 50rpx;
		}
		.big{
			width: 100rpx;
			height: 100rpx;
		}
		
	}
	.bottom_border{
		border-bottom: 0.5rpx solid #f2f3f2;
		box-shadow: 1px 0px 5px 5px #e2e2e2;
	}
</style>
